<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日程列表</title>
    <style>
        .ht {
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }

        .tab {
            width: 80%;
            border: 5px solid cadetblue;
            margin: 0 auto;
            border-radius: 5px;
            font-family: 幼圆;
        }

        .ltr td {
            border: 1px solid powderblue;
            text-align: center;
            padding: 8px;
        }

        .btn1 {
            border: 2px solid powderblue;
            border-radius: 4px;
            width: 100px;
            background-color: antiquewhite;
            cursor: pointer;
            margin: 0 5px;
        }

        .buttonContainer {
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">所有日程如下</h3>
<table class="tab" cellspacing="0">
    <tr class="ltr">
        <th>编号</th>
        <th>用户ID</th>
        <th>内容</th>
        <th>进度</th>
        <th>操作</th>
    </tr>
    <tbody id="scheduleTableBody">
    <!-- 数据将通过JS动态生成 -->
    </tbody>
    <tr class="ltr buttonContainer">
        <td colspan="5">
            <button class="btn1" onclick="addSchedule()">新增日程</button>
        </td>
    </tr>
</table>

<script>
    // 页面加载完成后渲染数据
    window.onload = function () {
        //1.创建一个Ajax对象
        var request = new XMLHttpRequest();
        //2.设置请求方式和请求的路径
        request.open("GET", "/schedule_system_war/queryAll", true)
        //3.处理请求 设置回调函数
        request.onreadystatechange = function () {
            if (request.readyState==4){
                // 先打印原始响应内容进行调试
                console.log("服务器响应:", this.responseText);
                if (request.status==200){
                    //得到后端的数据用JSON来进行接受
                    const schedules = JSON.parse(request.responseText);
                    renderTable(schedules); // 渲染表格
                }else {
                    //请求失败处理的路径
                    console.error("请求失败",request.status)
                }
            }
        }
        //发送请求
        request.send()
    };

    // 渲染表格函数
    function renderTable(schedules) {
        const tableBody = document.getElementById('scheduleTableBody');

        // 清空表格
        tableBody.innerHTML = '';

        // 无数据处理
        if (schedules.length === 0) {
            tableBody.innerHTML = '<tr class="ltr"><td colspan="5" class="buttonContainer">暂无日程数据</td></tr>';
            return;
        }

        // 遍历数据生成表格行
        schedules.forEach(schedule => {
            const row = document.createElement('tr');
            row.className = 'ltr';

            // 编号
            const sidCell = document.createElement('td');
            sidCell.textContent = schedule.sid;
            row.appendChild(sidCell);

            // 用户ID
            const uidCell = document.createElement('td');
            uidCell.textContent = schedule.uid;
            row.appendChild(uidCell);

            // 内容
            const titleCell = document.createElement('td');
            titleCell.textContent = schedule.title;
            row.appendChild(titleCell);

            // 进度
            const statusCell = document.createElement('td');
            statusCell.textContent = schedule.completed === 1 ? '已完成' : '未完成';
            row.appendChild(statusCell);

            // 操作按钮
            const actionCell = document.createElement('td');
            actionCell.className = 'buttonContainer';
            actionCell.innerHTML = `
                <button class="btn1" onclick="deleteSchedule(${schedule.sid})">删除</button>
                <button class="btn1" onclick="toggleStatus(${schedule.sid})">${schedule.completed === 1 ? '未完成' : '已完成'}</button>
            `;
            row.appendChild(actionCell);

            tableBody.appendChild(row);
        });
    }

    // 新增日程
    function addSchedule() {
        const title = prompt("请输入日程内容：");
        if (!title) return;

        const newSid = schedules.length > 0 ? Math.max(...schedules.map(s => s.sid)) + 1 : 1;
        // 这里简单使用1作为默认用户ID，实际场景可以根据登录用户动态获取
        schedules.push({sid: newSid, uid: 1, title: title, completed: 0});
        renderTable(schedules);
    }

    // 删除日程
    function deleteSchedule(sid) {
        if (confirm("确定要删除这条日程吗？")) {
            schedules = schedules.filter(s => s.sid !== sid);
            renderTable(schedules);
        }
    }

    // 切换完成状态
    function toggleStatus(sid) {
        schedules = schedules.map(s => {
            if (s.sid === sid) {
                s.completed = s.completed === 1 ? 0 : 1;
            }
            return s;
        });
        renderTable(schedules);
    }
</script>
</body>
</html>
